﻿@using RuoVea.ExDto
@using RuoVea.OmiDict
@using RuoVea.OmiDict.Language
@using RuoVea.OmiDict.Attributes
@using RuoVea.OmiDict.Options
@{
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.dictionary_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>
        .el-button [class*="el-icon-"] + span {margin-left: 1px !important;}
        .status-enabled { color: #67c23a; }
        .status-disabled { color: #f56c6c; }
        .system-built-in { color: #909399; }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
            <template slot-scope="{type,size,row,index}" slot="menu">
                <el-button icon="el-icon-s-grid" :size="size" :type="type" @@click="handleDictValue(row,index)" v-if="option.dicValueBtn">{{i18n.t('dictionary_value')}}</el-button>
            </template>
        </avue-crud>
        <el-open-web :dialogtitle="dialogtitle" ref="iframe" v-bind:dialogvisible="dictValueDialogVisible"
                     dialogwidth="95%" :url="dictValueUrl" v-on:close="onClose" dialogstyle="width:100%;height:680px;"></el-open-web>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{"code_format_error": "编码格式不正确，必须全大写英文、数字和下划线，且以字母开头","category": "所属分类","property_value": "属性值","dictionary_value": "字典值","is_default": "是否默认","system_flag": "系统标识","custom": "用户自定义","system_builtin": "系统内置"} };
        Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{"code_format_error": "Invalid code format, must be uppercase letters, numbers and underscores only, and start with a letter","category": "Belongs to Category","property_value": "Property Value","dictionary_value": "Dictionary Value","is_default": "Is Default","system_flag": "System Flag","custom": "Custom","system_builtin": "System Built-in"} };
        Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{"code_format_error": "Format de code invalide, doit contenir uniquement des lettres majuscules, des chiffres et des underscores, et commencer par une lettre","category": "Catégorie associée","property_value": "Valeur de propriété","dictionary_value": "Valeur de dictionnaire","is_default": "Par défaut","system_flag": "Drapeau système","custom": "Personnalisé","system_builtin": "Intégré au système"} };
        Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{ "code_format_error": "コード形式が無効です。大文字の英字、数字、アンダースコアのみで、文字で始まる必要があります","category": "所属カテゴリ","property_value": "プロパティ値", "dictionary_value": "辞書値","is_default": "デフォルトかどうか","system_flag": "システムフラグ","custom": "カスタム","system_builtin": "システム組み込み"} };
        Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{ "code_format_error": "Định dạng mã không hợp lệ, phải chỉ chứa chữ in hoa, số và dấu gạch dưới, và bắt đầu bằng chữ cái","category": "Phân loại thuộc về","property_value": "Giá trị thuộc tính","dictionary_value": "Giá trị từ điển","is_default": "Có phải mặc định không","system_flag": "Cờ hệ thống","custom": "Tùy chỉnh","system_builtin": "Tích hợp sẵn hệ thống"} };
        Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{"code_format_error": "編碼格式不正確，必須全大寫英文、數字和底線，且以字母開頭","category": "所属分类","property_value": "属性值","dictionary_value": "字典值","is_default": "是否默认","system_flag": "系統標識","custom": "用戶自定義","system_builtin": "系統內置"} };
    </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        const sysFlagDicData = [
            { label: Vue.prototype.i18n.t('custom'), value: 0 },
            { label: Vue.prototype.i18n.t('system_builtin'), value: 1 }
        ];

        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "sysDictType",
                    pageUrl: "/dicttype/pages",
                    addUrl: "/dicttype/add", 
                    editUrl: "/dicttype/update",
                    deleteUrl: "/dicttype/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`sysDictType:pages`),
                        refreshBtn: Permissions.avePermission(`sysDictType:pages`),
                        addBtn: Permissions.avePermission(`sysDictType:addData`),
                        editBtn: Permissions.avePermission(`sysDictType:updateData`),
                        delBtn: Permissions.avePermission(`sysDictType:deleteData`),
                        viewBtn: Permissions.avePermission(`sysDictType:data`),
                        dicValueBtn: Permissions.avePermission(`sysDictType:dicValue`),
                        rowKey: 'id',
                        searchShow: false,
                        menuWidth: 280,
                        dialogWidth: '50%',
                        dialogClickModal: false, // 防止点击外部关闭
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, type: "number",search: false, hide: true, display: false, showColumn: false },
                            { prop: "name", label: `${this.i18n.t('name')}`, search: true, overHidden: true,rules: [{ required: true, message: `${this.i18n.t('pleaseenter')}${this.i18n.t('code')}` }] },
                            { prop: "code", label: `${this.i18n.t('code')}`, search: true,
                              rules: [
                                { required: true, message: `${this.i18n.t('pleaseenter')}${this.i18n.t('dict_type_code')}` },
                                { pattern: /^[A-Z][A-Z0-9_]*$/, message: `${this.i18n.t('code_format_error')}` }
                              ] },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, type: "number", min: 0, value: 10, width: 90 },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`,search: true, type: "radio", dicData: disableDicData, value: 0, width: 100 },
                            { prop: "sysFlag", label: `${this.i18n.t('system_flag')}`,search: true, type: "radio", dicData: sysFlagDicData, value: 0, width: 120,span: 24, addDisplay: true, editDisplay: false },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, span: 24, minRows: 2, maxRows: 4 },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140 }
                        ]
                    },

                    dictValueDialogVisible: false,
                    dialogtitle: "",
                    dictValueUrl: "",
                    url: "/dictvalue/index/"
                }
            },
            methods: {
                cellStyle({ row, column }) {
                    // 根据数据模型调整状态显示
                    if (column.property === 'isDisable') {
                        return row.isDisable === 0 ? 'status-enabled' : 'status-disabled';
                    }
                    if (column.property === 'sysFlag') {
                        return row.sysFlag === 1 ? 'system-built-in' : '';
                    }
                },

                handleDictValue(row) {
                    this.dialogtitle = `[${row.name}] ${this.i18n.t('dictionary_value')}`;
                    this.dictValueUrl = `${Vue.prototype.$baseURL}${this.url}${row.id}?typeName=${row.name}`;   
                    this.dictValueDialogVisible = true;
                },
                
                onClose() {
                    this.dictValueDialogVisible = false;
                }
            }
        });
    </script>
</body>
</html>